import {Component, OnInit, Input, OnDestroy} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { ContactService } from '../service/contact-service.service';
import { UtilService } from '../service/util-service.service';
@Component({
  selector: 'app-listedit',
  templateUrl: './listedit.component.html',
  styleUrls: ['./listedit.component.styl']
})

export class Editor implements OnInit {
  isAdd: boolean;
  operateTitle: string;
  editId: number;
  contacts: any = {};
  contact: any = {};
  isName = false;
  isPhoneNum = false;
  isAddr = false;
  isEmail = false;
  isBir = false;
  nameTip = false;
  phoneTip = false;
  addrTip = false;
  emailTie = false;
  birTip = false;

  constructor(
      private _router: Router,
      private _activatedRoute: ActivatedRoute,
      private _constactService: ContactService,
      private _location: Location,
      private util: UtilService
  ) {}
  ngOnInit() {

    this.getContacts();
    this._activatedRoute.params.subscribe(params => {
      // this.isAdd = params['isAdd'];
      this.editId = params['id'];
      this.isAdd = !this.editId; //通过路由参数判断是添加还是编辑
    });
    this.operateTitle = this.isAdd ? '新建联系人' : '编辑联系人';
    //
    if (!this.isAdd) {
      this.getContactDetailById(this.editId);//如过是编辑取最新数据
      this.isName = this.isPhoneNum = this.isAddr = this.isEmail = this.isBir = true;//设置表单为true
    }
  }

  submitForm() {
    //提示显示
    this.nameTip = true;
    this.phoneTip = true;
    this.addrTip = true;
    this.emailTie = true;
    this.birTip = true;

    if (
        this.isName && //验证数据
        this.isPhoneNum &&
        this.isAddr &&
        this.isEmail &&
        this.isBir
    ) {
      //提交表单
      if (this.isAdd) {
        this.addContact();
      } else {
        this.editContact();
      }
    }
  }
  getContacts() {
    //取得列表数据
    this._constactService.getContactsData().subscribe(data => {
      this.contacts = data;
    });
  }

  getContactDetailById(id: number) {
    //取得详细数据
    this._constactService.getContactById(id).subscribe(data => {
      this.contact = data;
    });
  }

  addContact() {
    const newContact = {
      name: this.contact.name,
      telNum: this.contact.telNum,
      address: this.contact.address,
      email: this.contact.email,
      birthday: this.contact.birthday,
      collection: 0
    };
    this._constactService.addContact(newContact);//保存数据
    this._router.navigate(['']);//跳转到首页
  }

  editContact() {
    const editContact = {
      id: this.editId,
      name: this.contact.name,
      telNum: this.contact.telNum,
      address: this.contact.address,
      email: this.contact.email,
      birthday: this.contact.birthday,
      collection: 0
    };
    this._constactService.editContact(editContact);//修改数据
    this._router.navigate(['/list', this.editId]);
  }

  cancleOperate() {
    this._location.back();//退回
  }

  // 失去焦点事件
  onBlurName() {
    this.nameTip = true;
    this.isName = this.contact.name ? true : false;//判断用户名是否填写
  }
  onBlurPhone() {
    this.phoneTip = true;
    this.isPhoneNum = this.util.checkPhoneNum(this.contact.telNum);//判断手机 验证手机
  }
  onBlurAddr() {
    this.addrTip = true;
    this.isAddr = this.contact.address ? true : false; //判断地址是否填写
  }
  onBlurEmail() {
    this.emailTie = true;
    this.isEmail = this.util.checkEmail(this.contact.email); //判断邮箱 验证邮箱
  }
  onBlurBir() {
    this.birTip = true;
    this.isBir = this.contact.birthday ? true : false; //判断生日是否填写
  }
 }
